<template>
    <up-modal 
        :show="show"
        :title="title" 
        :content='content'
        :closeOnClickOverlay="true"
        :width="width"
        :confirmText="confirmText"
        :cancelText="cancelText"
        :showCancelButton="showCancelButton"
        :confirmColor="confirmColor"
        :cancelColor="cancelColor"
        :buttonReverse="buttonReverse"
        @confirm="confirm"
        @cancel="cancel"
        @close="close"
    ></up-modal>
</template>
<script setup lang="ts">
import { ref } from 'vue';

interface PropsType {
    title: string,
    show: boolean,
    content: string,
    width: string,
    confirmText: string,
    cancelText: string,
    showCancelButton: boolean,
    confirmColor: string,
    cancelColor: string,
    buttonReverse: boolean,
}
const props = withDefaults(defineProps<PropsType>(), {
    title: "", // 标题内容
    show: false, // 是否显示模态框
    width: "300px",
    confirmText: "确定", // 确认按钮的文字
    cancelText: "取消", // 取消按钮的文字
    showCancelButton: true, // 	是否显示取消按钮
    confirmColor: "#2979ff", // 确认按钮的颜色
    cancelColor: "#606266", // 取消按钮的颜色
    buttonReverse: false, // 对调确认和取消的位置
})

interface EmitType {
    (e: "confirm", val: boolean): void;
    (e: "cancel", val: boolean): void;
    (e: "close", val: boolean): void;
}
const emit = defineEmits<EmitType>();


const confirm = () => {
    emit('confirm', false);
}

const cancel = () => {
    emit('cancel', false);
}

const close = () => {
    emit('close', false);
}

defineExpose ({
    confirm,
    cancel,
    close
})

</script>